<style scoped>
	@media screen and (min-width: 460px) {
		.wh_item_date:hover {
			background: #71c7a5;
			cursor: pointer;
		}
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 998;
		transition: 0.3s;
	}

	.mask-content {
		width: 100%;
		height: 580upx;
		transition: 0.3s;
		background: #fff;
	}
	
	* {
		margin: 0;
		padding: 0;
	}

	.wh_container {
		/* position: fixed;
		left: 0;
		top: 0; */
		width: 100%;
		margin: auto;
	}

	li {
		list-style-type: none;
	}

	.wh_top_changge {
		display: flex;
	}

	.wh_top_changge li {
		cursor: pointer;
		display: flex;
		color: #fff;
		font-size: 18px;
		flex: 1;
		justify-content: center;
		align-items: center;
		height: 47px;
	}

	.wh_top_changge .wh_content_li {
		cursor: auto;
		flex: 2.5;
	}

	.wh_content_all {
		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
			"Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
		background-color: #0fc37c;
		width: 100%;
		overflow: hidden;
		padding-bottom: 8px;
	}

	.wh_content {
		display: flex;
		flex-wrap: wrap;
		padding: 0 3% 0 3%;
		width: 100%;
	}

	.wh_content:first-child .wh_content_item_tag,
	.wh_content:first-child .wh_content_item {
		color: #ddd;
		font-size: 16px;
	}

	.wh_content_item,
	wh_content_item_tag {
		font-size: 15px;
		width: 13.4%;
		text-align: center;
		color: #fff;
		position: relative;
	}

	.wh_content_item {
		height: 40px;
	}

	.wh_top_tag {
		width: 40px;
		height: 40px;
		line-height: 40px;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wh_item_date {
		width: 40px;
		height: 40px;
		line-height: 40px;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wh_jiantou1 {
		width: 12px;
		height: 12px;
		border-top: 2px solid #ffffff;
		border-left: 2px solid #ffffff;
		transform: rotate(-45deg);
	}

	.wh_jiantou1:active,
	.wh_jiantou2:active {
		border-color: #ddd;
	}

	.wh_jiantou2 {
		width: 12px;
		height: 12px;
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;
		transform: rotate(45deg);
	}

	.wh_content_item>.wh_isMark {
		margin: auto;
		border-radius: 100px;
		background: blue;
		z-index: 2;
	}

	.wh_content_item .wh_other_dayhide {
		color: #bfbfbf;
	}

	.wh_content_item .wh_want_dayhide {
		color: #bfbfbf;
	}

	.wh_content_item .wh_isToday {
		/* background: yellow;
  border-radius: 100px; */
	}

	.wh_content_item .wh_chose_day {
		background: green;
		border-radius: 100px;
	}
</style>
<template>
	<view v-if="showcalendar" class="mask" @click="showCalendarfn()" @touchmove.stop.prevent="stopPrevent" :style="{ backgroundColor: backgroundColor }">
		<view class="mask-content" @click.stop.prevent="stopPrevent" :style="[
				{
					height: config.height,
					transform: transform
				}
			]">
			<section class="wh_container">
					<div class="wh_content_all">
						<div class="wh_top_changge">
							<li @click="PreMonth(myDate,false)">
								<div class="wh_jiantou1"></div>
							</li>
							<li class="wh_content_li">{{dateTop}}</li>
							<li @click="NextMonth(myDate,false)">
								<div class="wh_jiantou2"></div>
							</li>
						</div>
						<div class="wh_content">
							<div class="wh_content_item" v-for="tag in textTop">
								<div class="wh_top_tag">{{tag}}</div>
							</div>
						</div>
						<div class="wh_content">
							<div class="wh_content_item" v-for="(item,index) in list" :key="index" @click="clickDay(item,index)">
								<div class="wh_item_date" v-bind:class="[{ wh_isMark: item.isMark},{wh_other_dayhide:item.otherMonth!=='nowMonth'},{wh_want_dayhide:item.dayHide},{wh_isToday:item.isToday},{wh_chose_day:item.chooseDay},setClass(item)]">{{item.id}}</div>
							</div>
						</div>
					</div>
				</section>
		</view>
	</view>
	</template>
<script>
	import timeUtil from "./calendar";
	export default {
		data() {
			return {
				myDate: [],
				list: [],
				historyChose: [],
				dateTop: "",
				showcalendar: false,
				config: {},
				transform: 'translateY(50vh)',
				contentHeight:0,
				backgroundColor: 'rgba(0,0,0,0)',
				timer: 0
			};
		},
		props: {
			markDate: {
				type: Array,
				default: () => []
			},
			markDateMore: {
				type: Array,
				default: () => []
			},
			textTop: {
				type: Array,
				default: () => ["一", "二", "三", "四", "五", "六", "日"]
			},
			sundayStart: {
				type: Boolean,
				default: () => false
			},
			agoDayHide: {
				type: String,
				default: `0`
			},
			futureDayHide: {
				type: String,
				default: ``
			}
		},
		created() {
			this.intStart();
			this.myDate = new Date();
			const height = uni.upx2px(580) + 'px';
			this.config = {
				height: height,
				transform: `translateY(${height})`,
				backgroundColor: 'rgba(0,0,0,.4)'
			};
			this.transform = this.config.transform;
		},
		methods: {
			stopPrevent(){},
			intStart() {
				timeUtil.sundayStart = this.sundayStart;
			},
			setClass(data) {
				let obj = {};
				obj[data.markClassName] = data.markClassName;
				return obj;
			},
			clickDay: function(item, index) {
				if (item.otherMonth === "nowMonth" && !item.dayHide) {
					this.getList(this.myDate, item.date);
				}
				if (item.otherMonth !== "nowMonth") {
					item.otherMonth === "preMonth" ?
						this.PreMonth(item.date) :
						this.NextMonth(item.date);
				}
			},
			ChoseMonth: function(date, isChosedDay = true) {
				date = timeUtil.dateFormat(date);
				this.myDate = new Date(date);
				this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
				if (isChosedDay) {
					this.getList(this.myDate, date, isChosedDay);
				} else {
					this.getList(this.myDate);
				}
			},
			PreMonth: function(date, isChosedDay = true) {
				date = timeUtil.dateFormat(date);
				this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");
				this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
				if (isChosedDay) {
					this.getList(this.myDate, date, isChosedDay);
				} else {
					this.getList(this.myDate);
				}
			},
			NextMonth: function(date, isChosedDay = true) {
				date = timeUtil.dateFormat(date);
				this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");
				this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
				if (isChosedDay) {
					this.getList(this.myDate, date, isChosedDay);
				} else {
					this.getList(this.myDate);
				}
			},
			forMatArgs: function() {
				let markDate = this.markDate;
				let markDateMore = this.markDateMore;
				markDate = markDate.map(k => {
					return timeUtil.dateFormat(k);
				});
				markDateMore = markDateMore.map(k => {
					k.date = timeUtil.dateFormat(k.date);
					return k;
				});
				return [markDate, markDateMore];
			},
			getList: function(date, chooseDay, isChosedDay = true) {
				const [markDate, markDateMore] = this.forMatArgs();
				this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`;
				let arr = timeUtil.getMonthList(this.myDate);
				for (let i = 0; i < arr.length; i++) {
					let markClassName = "";
					let k = arr[i];
					k.chooseDay = false;
					const nowTime = k.date;
					const t = new Date(nowTime).getTime() / 1000;
					//看每一天的class
					for (const c of markDateMore) {
						if (c.date === nowTime) {
							markClassName = c.className || "";
						}
					}
					//标记选中某些天 设置class
					k.markClassName = markClassName;
					k.isMark = markDate.indexOf(nowTime) > -1;
					//无法选中某天
					k.dayHide = t < this.agoDayHide || t > this.futureDayHide;
					if (k.isToday) {
						this.$emit("isToday", nowTime);
					}
					let flag = !k.dayHide && k.otherMonth === "nowMonth";
					if (chooseDay && chooseDay === nowTime && flag) {
						this.$emit("choseDay", nowTime);
						this.historyChose.push(nowTime);
						k.chooseDay = true;
					} else if (
						this.historyChose[this.historyChose.length - 1] === nowTime &&
						!chooseDay &&
						flag
					) {
						k.chooseDay = true;
					}
				}
				this.list = arr;
			},
			showCalendarfn() {
				//防止高频点击
				if (this.timer == 1) {
					return;
				}
				this.timer = 1;
				setTimeout(() => {
					this.timer = 0;
				}, 500);
				
				if (this.showcalendar) {
					this.transform = this.config.transform;
					this.backgroundColor = 'rgba(0,0,0,0)';
					setTimeout(() => {
						this.showcalendar = false
						this.hasTabbar && uni.showTabBar();
					}, 200);
					return;
				}
				
				this.showcalendar = true
				//等待mask重绘完成执行
				if (this.hasTabbar) {
					uni.hideTabBar({
						success: () => {
							setTimeout(() => {
								this.backgroundColor = this.config.backgroundColor;
								this.transform = 'translateY(0px)';
							}, 10);
						}
					});
				} else {
					setTimeout(() => {
						this.backgroundColor = this.config.backgroundColor;
						this.transform = 'translateY(0px)';
					}, 10);
				}
				
			}
		},
		mounted() {
			this.getList(this.myDate);
		},
		watch: {
			markDate: {
				handler(val, oldVal) {
					this.getList(this.myDate);
				},
				deep: true
			},
			markDateMore: {
				handler(val, oldVal) {
					this.getList(this.myDate);
				},
				deep: true
			},
			agoDayHide: {
				handler(val, oldVal) {
					this.getList(this.myDate);
				},
				deep: true
			},
			futureDayHide: {
				handler(val, oldVal) {
					this.getList(this.myDate);
				},
				deep: true
			},
			sundayStart: {
				handler(val, oldVal) {
					this.intStart();
					this.getList(this.myDate);
				},
				deep: true
			}
		}
	};
</script>
